स्क्रीन वेक लॉक एपीआई: वेब एप्लीकेशन्स में स्क्रीन स्लीप को रोकना

स्क्रीन वेक लॉक एपीआई एक वेब एपीआई है जो वेब एप्लीकेशन्स को डिवाइस को स्क्रीन डिम या लॉक होने से रोकने की अनुमति देता है। यह उन एप्लीकेशन्स के लिए विशेष रूप से उपयोगी है जहाँ निरंतर स्क्रीन दृश्यता आवश्यक है, जैसे कि मीडिया प्लेयर्स, नेविगेशन ऐप्स, और वे एप्लीकेशन्स जिन्हें लंबे समय तक उपयोगकर्ता की सहभागिता की आवश्यकता होती है।

स्क्रीन वेक लॉक क्यों महत्वपूर्ण है?

आज की दुनिया में, उपयोगकर्ता सहज अनुभव की उम्मीद करते हैं। एक डिवाइस जो स्वचालित रूप से स्क्रीन को डिम या लॉक कर देता है, इन अनुभवों को बाधित कर सकता है, खासकर जब उपयोगकर्ता किसी वेब एप्लीकेशन के साथ सक्रिय रूप से जुड़े हों। इन परिदृश्यों पर विचार करें:

• वीडियो प्लेबैक: कल्पना कीजिए कि आप कोई फिल्म देख रहे हैं या कुकिंग ट्यूटोरियल फॉलो कर रहे हैं, और स्क्रीन लगातार डिम हो रही है, जिससे आपको इसे जगाए रखने के लिए स्क्रीन पर टैप करना पड़ रहा है। यह एक निराशाजनक अनुभव है।
• नेविगेशन ऐप्स: ड्राइविंग करते समय और नेविगेशन ऐप का उपयोग करते समय, निरंतर दिशा-निर्देश प्रदान करने के लिए स्क्रीन को ऑन रहना आवश्यक है। एक डिम या लॉक स्क्रीन से मोड़ छूट सकते हैं और संभावित सुरक्षा खतरे हो सकते हैं।
• प्रेजेंटेशन ऐप्स: स्लाइड्स प्रस्तुत करने या महत्वपूर्ण जानकारी प्रदर्शित करने के लिए प्रेजेंटेशन के दौरान स्क्रीन को सक्रिय रहने की आवश्यकता होती है।
• गेमिंग एप्लीकेशन्स: कई खेलों को गेमप्ले के लिए अबाधित स्क्रीन दृश्यता की आवश्यकता होती है। स्क्रीन स्लीप गेमिंग अनुभव को बाधित कर सकती है।
• ऑनलाइन व्हाइटबोर्ड्स: ऑनलाइन व्हाइटबोर्ड पर सहयोगात्मक रूप से काम करने के लिए स्क्रीन को जगाए रखना आवश्यक है ताकि उपयोगकर्ताओं को फिर से जुड़ने के लिए बार-बार टैप न करना पड़े।

स्क्रीन वेक लॉक एपीआई इन समस्याओं का समाधान प्रदान करता है, जिससे वेब एप्लीकेशन्स स्क्रीन की ऑन/ऑफ स्थिति को नियंत्रित कर सकते हैं और एक अधिक सहज और उपयोगकर्ता-अनुकूल अनुभव प्रदान कर सकते हैं।

ब्राउज़र सपोर्ट

2024 के अंत तक, स्क्रीन वेक लॉक एपीआई को प्रमुख ब्राउज़रों में ठोस समर्थन प्राप्त है। हालाँकि, इष्टतम क्रॉस-ब्राउज़र संगतता सुनिश्चित करने के लिए Mozilla Developer Network (MDN) और Can I use जैसे संसाधनों पर नवीनतम ब्राउज़र संगतता जानकारी की जाँच करना हमेशा महत्वपूर्ण होता है। ब्राउज़र सपोर्ट ब्राउज़र संस्करण और ऑपरेटिंग सिस्टम के आधार पर भिन्न हो सकता है।

स्क्रीन वेक लॉक एपीआई का उपयोग करना

स्क्रीन वेक लॉक एपीआई का उपयोग करना अपेक्षाकृत सीधा है। यहाँ शामिल प्रमुख चरणों का विवरण दिया गया है:

1. एपीआई सपोर्ट की जाँच करें

एपीआई का उपयोग करने का प्रयास करने से पहले, यह जाँच करना आवश्यक है कि उपयोगकर्ता का ब्राउज़र इसका समर्थन करता है या नहीं। यह उन ब्राउज़रों में त्रुटियों को रोकता है जो एपीआई को लागू नहीं करते हैं।

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API supported
} else {
  // Screen Wake Lock API not supported
  console.log('Screen Wake Lock API is not supported by this browser.');
}

            

              
                Copy
              
            
          

2. वेक लॉक का अनुरोध करें

वेक लॉक का अनुरोध करने के लिए, navigator.wakeLock.request() विधि का उपयोग करें। यह विधि एक प्रॉमिस लौटाती है जो अनुरोध सफल होने पर एक WakeLockSentinel ऑब्जेक्ट के साथ हल होती है। WakeLockSentinel ऑब्जेक्ट सक्रिय वेक लॉक का प्रतिनिधित्व करता है।

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock active!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock was released');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Call this function to activate the wake lock
requestWakeLock();

            

              
                Copy
              
            
          

इस उदाहरण में, requestWakeLock() फ़ंक्शन एक स्क्रीन वेक लॉक प्राप्त करने का प्रयास करता है। 'screen' तर्क यह निर्दिष्ट करता है कि हम स्क्रीन को डिम या लॉक होने से रोकना चाहते हैं। यदि अनुरोध सफल होता है, तो कंसोल में एक संदेश लॉग किया जाता है। कोड में वेक लॉक अनुरोध के दौरान हो सकने वाली किसी भी अपवाद को पकड़ने के लिए एक त्रुटि हैंडलर भी शामिल है। महत्वपूर्ण रूप से, कोड "रिलीज़" इवेंट को सुनने के लिए एक इवेंट लिसनर जोड़ता है जो यह इंगित करता है कि वेक लॉक अब सक्रिय नहीं है। ऐसा तब हो सकता है जब उपयोगकर्ता ने स्पष्ट रूप से लॉक जारी कर दिया हो या यदि सिस्टम ने बिजली बचाने के उपायों के कारण इसे पुनः प्राप्त कर लिया हो।

3. वेक लॉक को रिलीज़ करें

जब वेक लॉक की आवश्यकता न हो तो उसे रिलीज़ करना महत्वपूर्ण है। ऐसा न करने पर डिवाइस की बैटरी खत्म हो सकती है और उपयोगकर्ता अनुभव पर नकारात्मक प्रभाव पड़ सकता है। वेक लॉक को रिलीज़ करने के लिए, WakeLockSentinel ऑब्जेक्ट पर release() विधि को कॉल करें।

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock released!');
  }
};

// Call this function to release the wake lock
releaseWakeLock();

            

              
                Copy
              
            
          

यह फ़ंक्शन सुरक्षित रूप से वेक लॉक को रिलीज़ करता है और wakeLock वेरिएबल को null पर सेट करता है। लॉक जारी करते समय त्रुटियों से बचने के लिए यह सुनिश्चित करना आवश्यक है कि wakeLock वेरिएबल को ठीक से प्रबंधित किया जाए।

4. वेक लॉक रिलीज़ इवेंट्स को संभालना

सिस्टम विभिन्न कारणों से वेक लॉक जारी कर सकता है, जैसे कि उपयोगकर्ता की निष्क्रियता या कम बैटरी। इन स्थितियों को शालीनता से संभालने के लिए WakeLockSentinel ऑब्जेक्ट पर release इवेंट को सुनना महत्वपूर्ण है। यह आपको वेक लॉक का पुनः अनुरोध करने या अन्य उचित कार्रवाई करने की अनुमति देता है।

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock was released');
  // Attempt to re-request the wake lock
  // or take other appropriate actions
  requestWakeLock(); // For example re-requesting the wakelock
});

            

              
                Copy
              
            
          

यह उदाहरण दिखाता है कि release इवेंट को कैसे सुनें और संभावित रूप से वेक लॉक का पुनः अनुरोध करें। वास्तविक कार्यान्वयन आपके एप्लीकेशन की विशिष्ट आवश्यकताओं पर निर्भर करेगा।

सर्वोत्तम प्रथाएँ और विचार

हालांकि स्क्रीन वेक लॉक एपीआई एक शक्तिशाली उपकरण है, इसका जिम्मेदारी से उपयोग करना और निम्नलिखित सर्वोत्तम प्रथाओं पर विचार करना आवश्यक है:

• केवल आवश्यक होने पर वेक लॉक का अनुरोध करें: अनावश्यक रूप से वेक लॉक प्राप्त करने से बचें, क्योंकि वे डिवाइस की बैटरी खत्म कर सकते हैं। केवल तभी वेक लॉक का अनुरोध करें जब उपयोगकर्ता अनुभव के लिए निरंतर स्क्रीन दृश्यता वास्तव में आवश्यक हो।
• वेक लॉक को तुरंत रिलीज़ करें: जैसे ही वेक लॉक की आवश्यकता न हो, उसे रिलीज़ कर दें। यह बैटरी पावर बचाने और अनावश्यक खपत को रोकने में मदद करता है।
• रिलीज़ इवेंट्स को शालीनता से संभालें: सिस्टम द्वारा अप्रत्याशित रूप से वेक लॉक जारी किए जाने के लिए तैयार रहें। release इवेंट को सुनें और उचित कार्रवाई करें, जैसे कि वेक लॉक का पुनः अनुरोध करना या उपयोगकर्ता को सूचित करना।
• उपयोगकर्ता नियंत्रण प्रदान करें: उपयोगकर्ताओं को वेक लॉक सुविधा को सक्षम या अक्षम करने के लिए नियंत्रण प्रदान करने पर विचार करें। यह उपयोगकर्ताओं को उनके डिवाइस की बिजली की खपत पर अधिक नियंत्रण देता है और उन्हें एप्लीकेशन के व्यवहार को अनुकूलित करने की अनुमति देता है। उदाहरण के लिए, एक मीडिया प्लेयर में "स्क्रीन ऑन रखें" टॉगल हो सकता है।
• बैटरी लाइफ पर विचार करें: बैटरी लाइफ पर पड़ने वाले प्रभाव के प्रति सचेत रहें। लगातार स्क्रीन को ऑन रखने से बैटरी लाइफ काफी कम हो सकती है, खासकर मोबाइल उपकरणों पर। उपयोगकर्ताओं को संभावित प्रभाव के बारे में सूचित करें और इसे कम करने के लिए विकल्प प्रदान करें।
• उपयोगकर्ता की अनुमति: हालांकि एपीआई सीधे उपयोगकर्ता की अनुमति नहीं मांगता है, लेकिन यह एक अच्छा अभ्यास है कि उपयोगकर्ता को सूचित किया जाए कि एप्लीकेशन स्क्रीन को सोने से रोक रहा है, और उन्हें इस व्यवहार को अक्षम करने की अनुमति दी जाए।
• फॉलबैक तंत्र: उन ब्राउज़रों के लिए जो एपीआई का समर्थन नहीं करते हैं, एक फॉलबैक तंत्र लागू करने पर विचार करें। इसमें जावास्क्रिप्ट का उपयोग करके स्क्रीन को डिम या लॉक होने से रोकने के लिए समय-समय पर डमी इवेंट भेजना शामिल हो सकता है। हालाँकि, ध्यान रखें कि यह दृष्टिकोण स्क्रीन वेक लॉक एपीआई का उपयोग करने की तुलना में कम विश्वसनीय और अधिक संसाधन-गहन हो सकता है।
• परीक्षण: यह सुनिश्चित करने के लिए कि स्क्रीन वेक लॉक एपीआई अपेक्षा के अनुरूप काम करता है, अपने एप्लीकेशन का विभिन्न उपकरणों और ब्राउज़रों पर पूरी तरह से परीक्षण करें। बैटरी की खपत और उपयोगकर्ता अनुभव पर ध्यान दें।
• पहुँच (Accessibility): ध्यान रखें कि स्क्रीन को हमेशा चालू रखना कुछ उपयोगकर्ताओं के लिए समस्याग्रस्त हो सकता है। स्क्रीन वेक लॉक को अक्षम करने के तरीके प्रदान करना आपके एप्लीकेशन को अधिक सुलभ बनाता है।

वास्तविक दुनिया के उदाहरण

यहाँ कुछ वास्तविक दुनिया के उदाहरण दिए गए हैं कि विभिन्न एप्लीकेशन्स में स्क्रीन वेक लॉक एपीआई का उपयोग कैसे किया जा सकता है:

• मीडिया प्लेयर्स: एक वीडियो स्ट्रीमिंग ऐप प्लेबैक के दौरान स्क्रीन को डिम होने से रोकने के लिए स्क्रीन वेक लॉक एपीआई का उपयोग कर सकता है, जिससे एक सहज देखने का अनुभव मिलता है।
• नेविगेशन ऐप्स: एक नेविगेशन ऐप उपयोगकर्ता के ड्राइविंग के दौरान स्क्रीन को ऑन रखने के लिए एपीआई का उपयोग कर सकता है, यह सुनिश्चित करते हुए कि दिशा-निर्देश हमेशा दिखाई दें।
• प्रेजेंटेशन ऐप्स: एक प्रेजेंटेशन ऐप प्रेजेंटेशन के दौरान स्क्रीन को डिम होने से रोकने के लिए एपीआई का उपयोग कर सकता है, यह सुनिश्चित करते हुए कि दर्शक हमेशा स्लाइड्स देख सकें।
• फिटनेस ऐप्स: वर्कआउट सत्र को ट्रैक करने वाला एक फिटनेस ऐप स्क्रीन को ऑन रख सकता है ताकि उपयोगकर्ता अपने डिवाइस को अनलॉक किए बिना जल्दी से मेट्रिक्स देख सकें।
• रेसिपी ऐप्स: एक रेसिपी ऐप उपयोगकर्ता द्वारा रेसिपी का पालन करते समय स्क्रीन को ऑन रखने के लिए एपीआई का उपयोग कर सकता है, जिससे उपयोगकर्ता के खाना पकाने के दौरान स्क्रीन डिम होने से बचती है।
• कियोस्क एप्लीकेशन्स: कियोस्क एप्लीकेशन्स को इस सुविधा से लाभ होता है। उदाहरण के लिए, हवाई अड्डों या रेस्तरां में स्वयं-सेवा कियोस्क स्क्रीन वेक लॉक एपीआई का उपयोग यह सुनिश्चित करने के लिए कर सकते हैं कि स्क्रीन सक्रिय रहे और उपयोगकर्ता की बातचीत के प्रति उत्तरदायी रहे।
• टेलीमेडिसिन एप्लीकेशन्स: वर्चुअल डॉक्टर की नियुक्तियों के दौरान, विशेष रूप से जिन्हें अवलोकन की आवश्यकता होती है, स्क्रीन वेक लॉक एपीआई का उपयोग यह सुनिश्चित करने के लिए किया जा सकता है कि परामर्श के दौरान स्क्रीन ऑन रहे।

कोड उदाहरण: स्क्रीन वेक लॉक के साथ मीडिया प्लेयर

यह उदाहरण दर्शाता है कि एक साधारण मीडिया प्लेयर एप्लीकेशन में स्क्रीन वेक लॉक एपीआई को कैसे लागू किया जाए।

            
<!DOCTYPE html>
<html>
<head>
  <title>Media Player with Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <button id="wakeLockBtn">Enable Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock active!');
        wakeLockBtn.textContent = 'Disable Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock was released');
          wakeLockBtn.textContent = 'Enable Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock released!');
        wakeLockBtn.textContent = 'Enable Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Optional: Automatically request wake lock when video starts playing
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

यह कोड एक साधारण मीडिया प्लेयर बनाता है जिसमें स्क्रीन वेक लॉक को सक्षम या अक्षम करने के लिए एक बटन होता है। जब बटन पर क्लिक किया जाता है, तो कोड या तो एक नया वेक लॉक अनुरोध करता है या मौजूदा एक को रिलीज़ करता है। बटन का टेक्स्ट वेक लॉक की वर्तमान स्थिति को दर्शाने के लिए अपडेट किया जाता है। इस उदाहरण में एक वैकल्पिक इवेंट लिसनर भी शामिल है जो वीडियो चलना शुरू होने पर स्वचालित रूप से वेक लॉक का अनुरोध करता है। नोट: your-video.mp4 को अपनी वीडियो फ़ाइल के वास्तविक पथ से बदलें।

सुरक्षा संबंधी विचार

स्क्रीन वेक लॉक एपीआई को सुरक्षा को ध्यान में रखकर बनाया गया है। ब्राउज़र एपीआई के दुरुपयोग को रोकने के लिए विभिन्न सुरक्षा उपाय लागू करते हैं। उदाहरण के लिए, ब्राउज़र उस अवधि को सीमित कर सकते हैं जिसके लिए वेक लॉक रखा जा सकता है या वेक लॉक देने से पहले उपयोगकर्ता की सहभागिता की आवश्यकता हो सकती है। यह सुनिश्चित करने के लिए कि आप एपीआई का जिम्मेदारी से और नैतिक रूप से उपयोग कर रहे हैं, हमेशा इस लेख में पहले उल्लिखित सर्वोत्तम प्रथाओं का पालन करें।

स्क्रीन वेक लॉक एपीआई के विकल्प

स्क्रीन वेक लॉक एपीआई से पहले, डेवलपर अक्सर स्क्रीन स्लीप को रोकने के लिए "हैक" का इस्तेमाल करते थे। ये तरीके आम तौर पर अविश्वसनीय होते हैं और अनुशंसित नहीं हैं।

• नो-ऑप वीडियो एलिमेंट: पेज में एक छोटा, मूक वीडियो एलिमेंट डालना और इसे लगातार चलाना। यह सिस्टम को यह सोचने पर मजबूर करता है कि मीडिया चल रहा है, इस प्रकार नींद को रोकता है। यह अत्यधिक संसाधन गहन है।
• डमी AJAX अनुरोध: डिवाइस को "सक्रिय" रखने के लिए सर्वर पर समय-समय पर AJAX अनुरोध भेजना। यह एक खराब विकल्प है, क्योंकि यह नेटवर्क गहन और अविश्वसनीय है।

इन तरीकों की सिफारिश नहीं की जाती है, क्योंकि वे अविश्वसनीय हैं और प्रदर्शन और बैटरी जीवन पर नकारात्मक प्रभाव डाल सकते हैं। स्क्रीन वेक लॉक एपीआई वेब एप्लीकेशन्स में स्क्रीन स्लीप को रोकने के लिए अनुशंसित समाधान है।

निष्कर्ष

स्क्रीन वेक लॉक एपीआई उन वेब डेवलपर्स के लिए एक मूल्यवान उपकरण है जो सहज और आकर्षक उपयोगकर्ता अनुभव बनाना चाहते हैं। डिवाइस को स्क्रीन डिम या लॉक होने से रोककर, आप यह सुनिश्चित कर सकते हैं कि आपके एप्लीकेशन्स निष्क्रियता की लंबी अवधि के दौरान भी दृश्यमान और उत्तरदायी बने रहें। डिवाइस की बैटरी खत्म होने और उपयोगकर्ता अनुभव पर नकारात्मक प्रभाव डालने से बचने के लिए एपीआई का जिम्मेदारी से उपयोग करना और इस लेख में उल्लिखित सर्वोत्तम प्रथाओं का पालन करना याद रखें। जैसे-जैसे एपीआई को व्यापक रूप से अपनाया जाएगा, यह निस्संदेह वेब डेवलपमेंट टूलकिट का एक अनिवार्य हिस्सा बन जाएगा। अपने वेब एप्लीकेशन्स को उन्नत करने और दुनिया भर में अपने उपयोगकर्ताओं के लिए एक अधिक आनंददायक अनुभव प्रदान करने के लिए स्क्रीन वेक लॉक एपीआई की शक्ति को अपनाएं।